<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/6
  Time: 14:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <style>
        .top{
            width: 1210px;
            height:300px;
        }
        .mid{
            /*border: 1px solid red;*/
        }
    </style>
    <title>Title</title>
    <%-- 引入echarts  --%>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
</head>
<body>

<div class="top">
   <div id="main" style="width: 600px;height:300px;float:left"></div>

   <div id="main2" style="width: 600px;height:300px;float:left"></div>
</div>

<div class="mid">
    <div id="main3" style="width: 600px;height:300px;float:left"></div>

    <div id="main4" style="width: 600px;height:300px;float:left"></div>
</div>
   <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('main'));

       // 指定图表的配置项和数据
      var option = {
           title: {
               text: 'Distribution of Electricity',
               subtext: 'Fake Data'
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   type: 'cross'
               }
           },
           toolbox: {
               show: true,
               feature: {
                   saveAsImage: {}
               }
           },
           xAxis: {
               type: 'category',
               boundaryGap: false,
               // prettier-ignore
               data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
           },
           yAxis: {
               type: 'value',
               axisLabel: {
                   formatter: '{value} W'
               },
               axisPointer: {
                   snap: true
               }
           },
           visualMap: {
               show: false,
               dimension: 0,
               pieces: [
                   {
                       lte: 6,
                       color: 'green'
                   },
                   {
                       gt: 6,
                       lte: 8,
                       color: 'red'
                   },
                   {
                       gt: 8,
                       lte: 14,
                       color: 'green'
                   },
                   {
                       gt: 14,
                       lte: 17,
                       color: 'red'
                   },
                   {
                       gt: 17,
                       color: 'green'
                   }
               ]
           },
           series: [
               {
                   name: 'Electricity',
                   type: 'line',
                   smooth: true,
                   // prettier-ignore
                   data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                   markArea: {
                       itemStyle: {
                           color: 'rgba(255, 173, 177, 0.4)'
                       },
                       data: [
                           [
                               {
                                   name: 'Morning Peak',
                                   xAxis: '07:30'
                               },
                               {
                                   xAxis: '10:00'
                               }
                           ],
                           [
                               {
                                   name: 'Evening Peak',
                                   xAxis: '17:30'
                               },
                               {
                                   xAxis: '21:15'
                               }
                           ]
                       ]
                   }
               }
           ]
       };

       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);

       var myChart2 = echarts.init(document.getElementById('main2'));
       var option2 = {
           tooltip: {
               trigger: 'item'
           },
           legend: {
               top: '5%',
               left: 'center'
           },
           series: [
               {
                   name: 'Access From',
                   type: 'pie',
                   radius: ['40%', '70%'],
                   avoidLabelOverlap: false,
                   itemStyle: {
                       borderRadius: 10,
                       borderColor: '#fff',
                       borderWidth: 2
                   },
                   label: {
                       show: false,
                       position: 'center'
                   },
                   emphasis: {
                       label: {
                           show: true,
                           fontSize: 40,
                           fontWeight: 'bold'
                       }
                   },
                   labelLine: {
                       show: false
                   },
                   data: [
                       { value: 1048, name: 'Search Engine' },
                       { value: 735, name: 'Direct' },
                       { value: 580, name: 'Email' },
                       { value: 484, name: 'Union Ads' },
                       { value: 300, name: 'Video Ads' }
                   ]
               }
           ]
       };

       myChart2.setOption(option2);

       var myChart3 = echarts.init(document.getElementById('main3'));
      var option3 = {
           title: {
               text: 'Stacked Line'
           },
           tooltip: {
               trigger: 'axis'
           },
           legend: {
               data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           toolbox: {
               feature: {
                   saveAsImage: {}
               }
           },
           xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
           },
           yAxis: {
               type: 'value'
           },
           series: [
               {
                   name: 'Email',
                   type: 'line',
                   stack: 'Total',
                   data: [120, 132, 101, 134, 90, 230, 210]
               },
               {
                   name: 'Union Ads',
                   type: 'line',
                   stack: 'Total',
                   data: [220, 182, 191, 234, 290, 330, 310]
               },
               {
                   name: 'Video Ads',
                   type: 'line',
                   stack: 'Total',
                   data: [150, 232, 201, 154, 190, 330, 410]
               },
               {
                   name: 'Direct',
                   type: 'line',
                   stack: 'Total',
                   data: [320, 332, 301, 334, 390, 330, 320]
               },
               {
                   name: 'Search Engine',
                   type: 'line',
                   stack: 'Total',
                   data: [820, 932, 901, 934, 1290, 1330, 1320]
               }
           ]
       };
       myChart3.setOption(option3);




       var myChart4 = echarts.init(document.getElementById('main4'));

       var zxb=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; // 数据库中查询的

       var yzb=[120, 200, 150, 80, 70, 500, 130];

      var option4 = {
           xAxis: {
               type: 'category',
               data:zxb
           },
           yAxis: {
               type: 'value'
           },
           series: [
               {
                   data: yzb,
                   type: 'bar',
                   showBackground: true,
                   backgroundStyle: {
                       color: 'rgba(180, 180, 180, 0.2)'
                   }
               }
           ]
       };
       myChart4.setOption(option4);
   </script>
</body>
</html>
